<%@ page import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body {
	font-size: 12px;
}

table {
	border-collapse: collapse;
	dispaly: block;
}

table td {
	border: 1px solid black;
	padding: 3px;
}

#staff {
	padding: 0px;
	margin: 5px;
}

#staff li{
	list-style-type:none;
	padding: 3px 0px;
}

#staff li a:hover{
	text-decoration: underline;
	color: blue;
}

div.female{
	width: 20px;
	height: 20px;
	background: url(image/gender.png) no-repeat -65px -30px;
	border: 0px solid black;
	display: inline-block;
}
div.male{
	width: 20px;
	height: 20px;
	background: url(image/gender.png) no-repeat -100px -30px;
	border: 0px solid black;
	display: inline-block;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var say = $("#say");
	var send = $("#send");
	say.keypress(function(e){
		if (e.keyCode == 13 && sendValidate()){
			send.click();
		}
	});
	
	send.click(function(){
		if(sendValidate()){
			var sayValue = say.val();
			say.val("");
			$.post("${pageContext.request.contextPath}/SendServlet", {
				say : sayValue
			}, function(data){
				if (data == "nullusre") {
					alert("用户已过期，请重新登录。");
					window.location.href="${pageContext.request.contextPath}/InitServlet";
				}
				refresh();
			});
		}
	});
});

function sendValidate(){
	var say = $("#say");
	if(say.val() == ""){
		alert("发言内容不能为空。");
		say.select();
		return false;
	}
	
	return true;
}
function shortcut(say){
	if(say.value != "" && event.keyCode == 13){
		document.getElementById("send").click();
	}
}

function refresh(){
	$("table").css({
		width : "100%" //window.document.body.offsetWidth
	});
	$.post("${pageContext.request.contextPath}/RefreshServlet", function(data){
		//alert(data);
		var result = eval("(" + data + ")");
		$("#personCount").html(result.count);
		if (result.talks) {
			var talks = $("#talks");
			talks.html(result.talks);
			talks.parent()[0].scrollTop = talks[0].scrollHeight;
		}
		
		refreshStaff(result.staff);
	});
}

function refreshStaff(list){
	var ul = $("#staff").empty();
	
	$.each(list, function(i, n){
		var li = $("<li></li>").appendTo(ul);
		$("<div></div>").appendTo(li).addClass(n.gender);
		$("<a></a>").appendTo(li).css({
			"margin-top" : "-19px",
			"margin-left" : "20px",
			cursor : "pointer",
			display : "block"
		}).html(n.username).click(function(){
			$("#say").val("@" + $(this).html() + " " + $("#say").val()).focus();
		});
	});
}

function quit(){
	window.location.href = "${pageContext.request.contextPath}/QuitServlet";
}

window.setInterval(function(){
	//refresh();
}, 5000);
</script>
</head>
<body onload="refresh();">
<div>
<table>
<tr>
	<td colspan="2">
		<label style="float:left;">欢迎 ${user.username}（先生/女士） 来到远标聊天室</label>
		<a href="javascript:quit();" style="float:right; padding: 2px 5px;">退出</a>
	</td>
</tr>
<tr>
	<td valign="top" width="180" style="padding: 5px;">
		<fieldset>
			<legend>人员列表 (<label id="personCount">0</label>人)</legend>
			<ul id="staff"></ul>
		</fieldset>
	</td>
	<td>
<%--		<textarea id="talks" rows="30" cols="95"></textarea>--%>
		<div style="height: 500px; overflow-y:scroll; margin: 2px 5px;">
			<div id="talks"></div>
		</div>
	</td>
</tr>
<tr>
	<td colspan="2" height="40">
		<label>我说：</label>
		
		<input type="text" id="say" name="say" style="width: 80%;" onkeypress="//shortcut(this);">
		<input type="button" id="send" value="发言" onclick="//send(this);">
	</td>
</tr>
</table>
</div>
</body>
</html>
